<template>
    <view class="multi-book-detail">
        <view class="book-item" @tap="watchBook(item)" v-for="(item, index) in bookList" :key="index">
            <image  mode="aspectFit"
                    :src="item.booksHead"/>
            <text class="ellipsis">{{item.booksName}}</text>
        </view>
    </view>
</template>

<script>
    import { getBooks } from '@/util/commonFn'
    export default {
        name: "multi-book",
        props: {
            idName: {
                type: String,
                default: ''
            },
            idVal: {
                type: String,
                default: ''
            }
        },
        data(){
            return {
                limit: 4,
                page: 1,
                bookList: []
            }
        },
        mounted(){
            this.getBooksHandle({
                limit: 4,
                page: 1,
                [this.idName+'Id']: this.idVal
            })
        },
        methods: {
            watchBook(item){
                uni.navigateTo({
                    url: `../components/gw-book-detail?booksId=${item.booksId}`
                })
            },
            getBooksHandle(params){
                let that = this;
                getBooks(params).then(data=>{
                    that.bookList = data.data || [];
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .multi-book-detail{
        display: flex;
        margin-top: 30rpx;
        height: 100%;
        .book-item{
            flex: 0 0 250rpx;
            margin-right: 13rpx;
            &:last-of-type{
                margin-right: 0;
            }
            image{
                width: 100%;
                height: 187rpx;
                border-radius: 4rpx;
            }
            text{
                font-size:24rpx;
                font-family:PingFang SC;
                font-weight:400;
                line-height:33rpx;
                color:rgba(51,51,51,1);
                -webkit-line-clamp: 2;
            }
        }
    }
</style>
